<template>
    <div>
        <TopBar title="设备数据" iconshow></TopBar>
        <el-button type="text" @click="table = true">数据字段对照表</el-button>

        <el-drawer
            title="数据字段对照表"
            :visible.sync="table"
            direction="rtl"
            size="90%">
            <img src="传感器字段含义.png" alt="对照表" style="width: 100%">
        </el-drawer>

        <!--<div class="lineCharts" v-for="shenme in shenmes" >-->
        <!--    <div id="myChart" style="width: 100%; height: 400px"/>-->
        <!--</div>-->

        <!--v-for : value key index-->
        <div v-for="(sensorData, index) in sensorDatas">
            <graph :sensorData="sensorData" :order="index"></graph>
        </div>


    </div>
</template>

<script>
//本组件专注于查询数据，另一个组件专注于用单一数据渲染图像（开放数据接口，本组件调用该接口循环渲染图像）
/*一个设备有多个传感器，每个传感器同一时间里有多个字段的数据：
*   1.对于单个传感器，可以将整段数据都请求过来，对这段数据一个时刻一个时刻渲染
*   2.对于一个设备，可以将传感器的数据都放在一个数组里（遍历设备的传感器数组，请求下来放在一个数组里）
*   3.对传感器数据数组向graph组件进行v-for渲染，单个传感器数据用props传给graph
* */
import TopBar from "@/components/TopBar";
import graph from "@/views/facility/components/graph";
export default {
    name: "deviceData",
    components: {TopBar, graph},
    data(){
        return{
            deviceId: null,
            sensors: [],  //设备包含的传感器

            table: false,

            begin_time: "1679393271064000000",  //查询数据的开始时间和结束时间
            end_time: "1679393371065000000",

            time: [],
            ch1: [],
            ch2: [],
            ch3: [],
            sensorDatas: [],
            index: 0,  //展示的图是哪个数据

        }
    },
    methods: {
        getdata(){
            for(let sensor in this.sensors){
                let sensorId = this.sensors[sensor]
                //1. 获取原始全部数据
                this.$axios({
                    method: 'get',
                    url:
                        `http://10.112.6.250:8888/api/v1/sensor?dev_id=${sensorId}&begin_time=${this.begin_time}&end_time=${this.end_time}`,
                }).then((res) => {
                    this.sensorDatas.push(res.data.data.rows);
                    // console.log("传感器数据", sensorId, typeof res.data.data.rows, res.data.data.rows)
                }).catch((err) => {
                    console.log('获取传感器数据时错误：' + err);
                })
            }
        },
    },
    mounted() {
        this.deviceId = this.$route.query.deviceId
        this.sensors = this.$store.getters.getDeviceById(this.deviceId).sensors
        this.getdata()
    }
}
</script>

<style scoped>
.lineCharts{
    width: 100%;
    text-align: center;
}
#myChart{
    width: 100%;
    height: 400px;
}
</style>
